<template>
  <div class="app-container customer-div">
    <el-menu :default-active="tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="day">日计划</el-menu-item>
      <el-menu-item index="week">周计划</el-menu-item>
      <el-menu-item index="allDay">全部日计划</el-menu-item>
      <el-menu-item index="allWeek">全部周计划</el-menu-item>
      <el-menu-item index="setWeek">周计划设置</el-menu-item>
      <el-menu-item index="setDay">日计划设置</el-menu-item>
    </el-menu>


    <!--数据列表  日计划-->
    <div class="table-container" v-if="tab == 'day'">
      <div style="margin-top: 40px">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery" size="mini" label-width="80px">
          <el-form-item label="日期：">
            <el-date-picker
                    :default-time="['00:00:00', '23:59:59']"
                    v-model="listQuery.checkDate"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
                    @click="handleSearchList()"
                    type="primary">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>

          <el-table
            v-loading="listLoading"
            :data="tableData"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
                    label="日期"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.checkDate}}
              </template>
            </el-table-column>
            <el-table-column  label="业务员" width="100" align="center">
              <template slot-scope="scope">
                {{scope.row.userName}}
              </template>
            </el-table-column>
            <el-table-column
                    label="联系客户数"
                    width="100"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.contactNum}}
              </template>
            </el-table-column>
          <el-table-column
                  label="计划开发客户量"
                  width="120"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.aboutCustomerNum}}
            </template>
          </el-table-column>
            <el-table-column
                    label="实际开发客户数"
                    width="120"
                    align="center">
                <template slot-scope="scope">
                  {{scope.row.actualCustomerNum}}
                </template>
            </el-table-column>
            <el-table-column
                    label="预计销售量"
                    width="100"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.aboutSaleNum}}
              </template>
            </el-table-column>
            <el-table-column
                    label="实际销售量"
                    width="100"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.actualSaleNum}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="工作状态"
              width="100">
              <template slot-scope="scope">
                {{scope.row.workType | fifWorkType}}
              </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="销售完成率"
                    width="100">
              <template slot-scope="scope">
                {{scope.row.saleFinishRate}}
              </template>
            </el-table-column>
            <el-table-column
              prop="customerFinishRate"
              label="客户完成率"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="300">
              <template slot-scope="scope">
                 <div style="font-size:12px;padding-bottom:10px;">{{scope.row.remark}}</div>
                <div>
                   <img :src="item" v-for="item in scope.row.contactPics" style="width:50px;height:50px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.workType != 'leave_work'"
                  type="text"
                  size="mini"
                  @click="showTarget(scope.row)">设置目标
                </el-button>
                <el-button
                        v-if="scope.row.workType != 'leave_work'"
                        type="text"
                        size="mini"
                        @click="showNum(scope.row)">设置联系客户数
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[10,15,20]"
                    :total="count">
            </el-pagination>
          </div>
      </div>


    <!--数据列表  全部日计划-->
    <div class="table-container" v-if="tab == 'allDay'">
      <div style="margin-top: 40px">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery3" size="mini" label-width="80px">
          <el-form-item label="业务员：">
            <el-select v-model="listQuery3.userId" filterable placeholder="请选择" clearable>
              <el-option
                      v-for="item in userOptionList"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
                    :default-time="['00:00:00', '23:59:59']"
                    v-model="listQuery3.checkDate"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
                    @click="handleSearchList3()"
                    type="primary">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
              v-loading="listLoading3"
              :data="tableData3"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column
                label="日期"
                width="150"
                align="center">
          <template slot-scope="scope">
            {{scope.row.checkDate}}
          </template>
        </el-table-column>
        <el-table-column  label="业务员" width="100" align="center">
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column
                label="联系客户数"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.contactNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="计划开发客户量"
                width="120"
                align="center">
          <template slot-scope="scope">
            {{scope.row.aboutCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="实际开发客户数"
                width="120"
                align="center">
          <template slot-scope="scope">
            {{scope.row.actualCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="预计销售量"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.aboutSaleNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="实际销售量"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.actualSaleNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="工作状态"
                width="100">
          <template slot-scope="scope">
            {{scope.row.workType | fifWorkType}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="销售完成率"
                width="100">
          <template slot-scope="scope">
            {{scope.row.saleFinishRate}}
          </template>
        </el-table-column>
        <el-table-column
                prop="customerFinishRate"
                label="客户完成率"
                width="100"
                align="center">
        </el-table-column>
        <el-table-column
                prop="remark"
                label="备注"
                width="300">
          <template slot-scope="scope">
            <div style="font-size:12px;padding-bottom:10px;">{{scope.row.remark}}</div>
            <div>
              <img :src="item" v-for="item in scope.row.contactPics" style="width:50px;height:50px;cursor: pointer;object-fit: contain" @click="fullImg(item)"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                align="center">
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="mini"
                    @click="showEditDay(scope.row)">修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange3"
                @current-change="handleCurrentChange3"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery3.pageNum"
                :page-size="listQuery3.pageSize"
                :page-sizes="[10,15,20]"
                :total="count3">
        </el-pagination>
      </div>
    </div>


    <!--数据列表  周计划-->
    <div class="table-container" v-if="tab == 'week'">
      <el-table
              v-loading="listLoading4"
              :data="tableData4"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column
                label="日期"
                width="180"
                align="center">
          <template slot-scope="scope">
            {{scope.row.checkBeginDate}} - {{scope.row.checkEndDate}}
          </template>
        </el-table-column>
        <el-table-column  label="业务员" width="100" align="center">
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column
                label="联系客户数"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.contactNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="规定开发客户数"
                width="120"
                align="center">
          <template slot-scope="scope">
            {{scope.row.ruleCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="实际开发客户数"
                width="120"
                align="center">
          <template slot-scope="scope">
            {{scope.row.actualCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="预计销售量"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.aboutSaleNum }}
          </template>
        </el-table-column>
        <el-table-column
                label="突破销售量"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.topSaleNum }}
          </template>
        </el-table-column>
        <el-table-column
                label="实际销售量"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.actualSaleNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="规定潜在AB类客户数"
                width="120">
          <template slot-scope="scope">
            {{scope.row.ruleAbCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="实际潜在AB类客户数"
                width="120">
          <template slot-scope="scope">
            {{scope.row.abCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="销售完成率"
                width="100">
          <template slot-scope="scope">
            {{scope.row.saleFinishRate}}
          </template>
        </el-table-column>
        <el-table-column
                label="客户完成率"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.customerFinishRate}}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange4"
                @current-change="handleCurrentChange4"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery4.pageNum"
                :page-size="listQuery4.pageSize"
                :page-sizes="[10,15,20]"
                :total="count4">
        </el-pagination>
      </div>
    </div>

    <!--数据列表  全部周计划-->
    <div class="table-container" v-if="tab == 'allWeek'">
      <div style="margin-top: 40px">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery5" size="mini" label-width="80px">
          <el-form-item label="业务员：">
            <el-select v-model="listQuery5.userId" filterable placeholder="请选择" clearable>
              <el-option
                      v-for="item in userOptionList"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
                    @click="handleSearchList5()"
                    type="primary">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
              v-loading="listLoading5"
              :data="tableData5"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column
                label="日期"
                width="180"
                align="center">
          <template slot-scope="scope">
            {{scope.row.checkBeginDate}} - {{scope.row.checkEndDate}}
          </template>
        </el-table-column>
        <el-table-column  label="业务员" width="100" align="center">
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column
                label="联系客户数"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.contactNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="规定开发客户数"
                width="120"
                align="center">
          <template slot-scope="scope">
            {{scope.row.ruleCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="实际开发客户数"
                width="120"
                align="center">
          <template slot-scope="scope">
            {{scope.row.actualCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="预计销售量"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.aboutSaleNum }}
          </template>
        </el-table-column>
        <el-table-column
                label="突破销售量"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.topSaleNum }}
          </template>
        </el-table-column>
        <el-table-column
                label="实际销售量"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.actualSaleNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="规定潜在AB类客户数"
                width="120">
          <template slot-scope="scope">
            {{scope.row.ruleAbCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="实际潜在AB类客户数"
                width="120">
          <template slot-scope="scope">
            {{scope.row.abCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="销售完成率"
                width="100">
          <template slot-scope="scope">
            {{scope.row.saleFinishRate}}
          </template>
        </el-table-column>
        <el-table-column
                label="客户完成率"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.customerFinishRate}}
          </template>
        </el-table-column>
        <el-table-column
                label="操作"
                width="100"
                align="center">
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="mini"
                    @click="showEditWeek(scope.row)">修改
            </el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>


    <!--周计划设置-->
    <div v-if="tab == 'setWeek'">
      <div style="margin-top:40px;"><el-button  type="primary" size="small" @click="showCreateWeek"> 生成周计划</el-button></div>
      <el-table
              v-loading="listLoading2"
              :data="list2"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column  label="开发客户数"  align="center">
          <template slot-scope="scope">
               {{scope.row.customerNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="潜在AB类客户数"
                align="center">
          <template slot-scope="scope">
            {{scope.row.abCustomerNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="适用范围"
                align="center">
          <template slot-scope="scope">
            {{scope.row.userType | fifType}}
          </template>
        </el-table-column>
        <el-table-column
                label="操作"
                align="center">
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="mini"
                    @click="showSetWeek('edit',scope.row)">修改
            </el-button>
          </template>

        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery2.pageNum"
                :page-size="listQuery2.pageSize"
                :page-sizes="[10,15,20]"
                :total="count2">
        </el-pagination>
      </div>
    </div>


    <!--日计划设置-->
    <div v-if="tab == 'setDay'">
      <div style="margin-top:40px;"><el-button @click="showSetDay('add','')" type="primary" size="small"> 新增日计划</el-button></div>
      <el-table
              v-loading="listLoading1"
              :data="list1"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column  label="员工类型" align="center" prop="orderSn">
          <template slot-scope="scope">
                {{scope.row.userType | fifType}}
          </template>
        </el-table-column>
        <el-table-column
                label="联系客户数"
                align="center">
          <template slot-scope="scope">
             {{scope.row.contactBeginNum}} ~ {{scope.row.contactEndNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="开发客户数"
                align="center">
          <template slot-scope="scope">
              {{scope.row.customerNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="是否出差"
                align="center">
          <template slot-scope="scope">
            {{scope.row.isBusinessTrip == 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column
                label="销量超过多少吨减少一个客户"
                align="center">
          <template slot-scope="scope">
               {{scope.row.saleNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="操作"
                align="center">
            <template slot-scope="scope">
                          <el-button
                                  type="text"
                                  size="mini"
                                  @click="showSetDay('edit',scope.row)">修改
                          </el-button>
                          <el-button
                                  type="text"
                                  size="mini"
                                  @click="delDay(scope.row)">删除
                          </el-button>
            </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery1.pageNum"
                :page-size="listQuery1.pageSize"
                :page-sizes="[10,15,20]"
                :total="count1">
        </el-pagination>
      </div>
    </div>

    <!--增加日计划-->
    <el-dialog
            :close-on-click-modal="false"
            :visible.sync="dialogVisible1"
            width="500px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini" label-width="120px" ref="form1" :model="form1" :rules="rules1">
          <el-form-item label="员工类型：" prop="userType">
            <el-select v-model="form1.userType" filterable placeholder="请选择">
              <el-option
                      v-for="item in userTypes"
                      :key="item.key"
                      :label="item.name"
                      :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日联系客户数：" prop="contactBeginNum">
            <el-input v-model.number="form1.contactBeginNum" style="width:120px;" type="number"></el-input><span> - </span>
            <el-input v-model.number="form1.contactEndNum" style="width:120px;" type="number"></el-input>
          </el-form-item>
          <el-form-item label="开发客户数：" prop="customerNum">
            <el-input v-model.number="form1.customerNum" type="number"></el-input>
          </el-form-item>
          <el-form-item label="是否出差：" prop="isBusinessTrip">
            <el-radio-group v-model="form1.isBusinessTrip">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="销售多少吨可减少一个新开发客户：" prop="saleNum">
            <el-input v-model.number="form1.saleNum" type="number"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose1" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm1" :loading="btnLoading1" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <!--增加周计划-->
    <el-dialog
            :close-on-click-modal="false"
            :visible.sync="dialogVisible2"
            width="300px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini" label-width="130px" ref="form2" :model="form2" :rules="rules2">
          <el-form-item label="适用范围：">
             {{form2.userType | fifType}}
          </el-form-item>
          <el-form-item label="开发客户数：" prop="customerNum">
            <el-input v-model.number="form2.customerNum" type="number"></el-input>
          </el-form-item>
          <el-form-item label="潜在AB类客户数：" prop="abCustomerNum">
            <el-input v-model.number="form2.abCustomerNum" type="number"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose2" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <!--生成周计划-->
    <el-dialog
            title="生成周计划"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible3"
            width="600px">
      <div style="max-height: 500px;overflow: auto">
        <div style="font-size:14px;padding:10px;margin-bottom:20px;">确认生成以下时间工作计划？</div>
        <el-form size="mini" label-width="100px" ref="form3" :model="form3" :rules="rules3">
          <el-form-item label="适用日期：" prop="checkDate">
            <el-date-picker
                    v-model="form3.checkDate"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose3" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <!--放大图片-->
    <el-dialog
            :visible.sync="dialogVisible4"
            width="800px">
      <img :src="fullSrc" style="width:100%;"/>
    </el-dialog>

    <!--修改日计划-->
    <el-dialog
            title="修改日计划"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible5"
            width="500px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini" label-width="120px" ref="form5" :model="form5" :rules="rules5">
          <el-form-item label="计划开发客户数：" prop="aboutCustomerNum">
             <el-input v-model.number="form5.aboutCustomerNum" style="width:120px;" type="number"></el-input>
          </el-form-item>
          <el-form-item label="预计销量：" prop="aboutSaleNum">
            <el-input v-model.number="form5.aboutSaleNum" type="number" style="width:120px;" ></el-input>
          </el-form-item>
          <el-form-item label="工作状态：" prop="workType">
            <el-select v-model="form5.workType" filterable placeholder="请选择">
              <el-option
                      v-for="item in workTypes"
                      :key="item.key"
                      :label="item.name"
                      :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose5" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm5" :loading="btnLoading5" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <!--修改周计划-->
    <el-dialog
            title="修改周计划"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible6"
            width="500px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini" label-width="150px" ref="form6" :model="form6" :rules="rules6">
          <el-form-item label="预计销量：" prop="aboutSaleNum">
            <el-input v-model.number="form6.aboutSaleNum" type="number" style="width:120px;" ></el-input>
          </el-form-item>
          <el-form-item label="突破销售量：" prop="topSaleNum">
            <el-input v-model.number="form6.topSaleNum" type="number" style="width:120px;" ></el-input>
          </el-form-item>
          <el-form-item label="实际潜在AB类客户数：" prop="abCustomerNum">
            <el-input v-model.number="form6.abCustomerNum" type="number" style="width:120px;" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose6" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm6" :loading="btnLoading6" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <!--设置目标-->
    <el-dialog
            title="设置目标"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible7"
            width="500px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini" label-width="120px" ref="form7" :model="form7" :rules="rules7">
          <el-form-item label="预计销量：" prop="aboutSaleNum">
            <el-input v-model.number="form7.aboutSaleNum" type="number" style="width:120px;" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose7" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm7" :loading="btnLoading7" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>


    <!--设置联系客户数-->
    <el-dialog
            title="设置联系客户数"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible8"
            width="500px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini" label-width="120px" ref="form8" :model="form8" :rules="rules8">
          <el-form-item label="今日联系客户数：" prop="contactNum">
            <el-input v-model.number="form8.contactNum" type="number" style="width:120px;" ></el-input>
          </el-form-item>
          <el-form-item label="备注：" >
            <el-input v-model="form8.remark" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" :rows="2"></el-input>
          </el-form-item>
          <el-form-item label="图片上传：">
            <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in form8.contactPics">
              <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
              <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg(index)"></i>
            </div>
            <el-upload
                    class="avatar-uploader"
                    :data="uploadToken"
                    action="https://upload.qiniup.com"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose8" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm8" :loading="btnLoading8" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
    import axios from 'axios'
    import {editDayRule,delDayRule,weekRuleList,
      editDayData,editWeekData,
      getOrderUsersList,getKingInfo,uploadOrderImg,getQiniuToken,
      dayRuleListApi,editWeekRule,dayDataList,weekDataList,createCheckData} from '@/api/partner'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'

    const defaultListQuery={
      checkDate:null,
      userId:null,
      pageNum: 1,
      pageSize: 10,
    };
    const defaultListQuery3={
      userId:null,
      pageNum: 1,
      pageSize: 10,
    };
    const defaultListQuery1={
      pageNum: 1,
      pageSize: 10,
    };
    const defaultForm1={
      "ruleId" : 0,  //规则ID(若是新增，则为0)
      "customerNum" :'',   //需开发客户数
      "contactBeginNum" : '', //需完成联系客户数的范围
      "contactEndNum" : '',  //需完成联系客户数的范围
      "isBusinessTrip" : 0,  //是否出差(0正常上班，1出差 )
      "saleNum" : '',  //销售多少吨可减少一个新开发客户
      "userType" : '',//员工类型
    };
    const defaultForm2={
      "ruleId" : 0,      //规则ID
      "customerNum" : '', //规定开发新客户量
      "abCustomerNum" : '', //规定开发潜在AB客户量
    };
    const defaultForm3={
      checkDate:null
    };

    const defaultForm5={
      "dataId" : null,      //考核数据ID
      "aboutSaleNum" : null, //今日预计销售量(业务员填)
      "workType" : null, //今日出勤情况(正常:normal_work,出差:business_trip,请假:leave_work  销管填)
      "aboutCustomerNum" :null,
    };

    const defaultForm6={
      "dataId" : null,      //考核数据ID
      "aboutSaleNum" : null, //预计销售量
      "topSaleNum" : null, //突破销售量
      "abCustomerNum":null,
    };

    const defaultForm7={
      "dataId" : null,      //考核数据ID
      "aboutSaleNum" : null, //今日预计销售量(业务员填)
    };
    const defaultForm8={
      "dataId" : null,      //考核数据ID
      "contactNum" : null,
      "remark" : null,
      "contactPics" : null,
    };

    export default {
      name: "index",
      data(){
        const isvalidateContactBeginNum = (rule, value, callback) => {
            let contactEndNum = this.form1.contactEndNum !== '' ? parseFloat(this.form1.contactEndNum) :'';
            let contactBeginNum = this.form1.contactBeginNum !== '' ? parseFloat(this.form1.contactBeginNum) : '';
            console.log("this.form1.contactBeginNum", this.form1.contactEndNum)
            console.log("this.form1.contactBeginNum", this.form1.contactEndNum !== '')
            console.log(contactBeginNum)
            if(contactEndNum === ''|| contactBeginNum === ''){
               callback(new Error('开始与结束都必须填写'))
            }else if(contactEndNum < contactBeginNum){
                callback(new Error('开始数量应小于结束数量'))
            }else {
              callback()
            }
          };
          return {
              creator:'',
              listQuery1: JSON.parse(JSON.stringify(defaultListQuery1)),
              list1: [],
              count1: 0,
              listLoading1: false,
              dialogVisible1:false,
              form1:JSON.parse(JSON.stringify(defaultForm1)),
              btnLoading1:false,
              rules1:{
                customerNum:[{required: true, message: '请填写需开发客户数', trigger: 'blur'},],
                contactBeginNum:[{required: true, trigger: 'blur',validator: isvalidateContactBeginNum,},],
                isBusinessTrip:[{required: true, message: '请选择是否出差', trigger: 'change'},],
                saleNum:[{required: true, message: '请填写销售多少吨可减少一个新开发客户', trigger: 'blur'},],
                userType:[{required: true, message: '请选择员工类型', trigger: 'change'},],
              },

              listQuery2: JSON.parse(JSON.stringify(defaultListQuery1)),
              list2: [],
              count2: 0,
              listLoading2: false,
              dialogVisible2:false,
              form2:JSON.parse(JSON.stringify(defaultForm2)),
              btnLoading2:false,
              rules2:{
                customerNum:[{required: true, message: '请填写需开发客户数', trigger: 'blur'},],
                abCustomerNum:[{required: true, message: '请填写需开发客户数', trigger: 'blur'},],
                userType:[{required: true, message: '请选择员工类型', trigger: 'change'},],
              },
              userTypes:[{key:"senior_staff",name:'老员工'},{key:"formal_staff",name:'正式员工'},{key:"new_staff",name:'试用期员工'}],
              workTypes:[{key:"normal_work",name:'正常'},{key:"business_trip",name:'出差'},{key:"leave_work",name:'请假'}],
              userOptionList:[],
              uploadToken:{
                token:'',
              },
              imgDomain:'',
              tab:'day',
              listLoading:false,
              tableData:[],
              listQuery:JSON.parse(JSON.stringify(defaultListQuery)),
              count:0,
              listLoading3:false,
              tableData3:[],
              listQuery3:JSON.parse(JSON.stringify(defaultListQuery)),
              count3:0,

              listLoading4:false,
              tableData4:[],
              listQuery4:JSON.parse(JSON.stringify(defaultListQuery3)),
              count4:0,

              listLoading5:false,
              tableData5:[],
              listQuery5:JSON.parse(JSON.stringify(defaultListQuery3)),
              count5:0,
              dialogVisible3:false,
              form3:JSON.parse(JSON.stringify(defaultForm3)),
              btnLoading3:false,
              rules3:{
                checkDate:[{required: true, message: '请选择适用日期', trigger: 'change'},],
              },
            fullSrc:'',
            dialogVisible4:false,

            dialogVisible5:false,
            form5:JSON.parse(JSON.stringify(defaultForm5)),
            btnLoading5:false,
            rules5: {
              aboutSaleNum: [{required: true, message: '请输入预计销售量', trigger: 'blur'},],
              workType: [{required: true, message: '请选择工作状态', trigger: 'change'},],
              aboutCustomerNum: [{required: true, message: '请输入计划开发客户数', trigger: 'blur'},]
            },

            dialogVisible6:false,
            form6:JSON.parse(JSON.stringify(defaultForm6)),
            btnLoading6:false,
            rules6: {
              aboutSaleNum: [{required: true, message: '请输入预计销售量', trigger: 'blur'},],
              topSaleNum: [{required: true, message: '请输入突破销售量', trigger: 'blur'},],
              abCustomerNum:[{required: true, message: '请输入实际潜在AB类客户数', trigger: 'blur'},],
            },

            dialogVisible7:false,
            form7:JSON.parse(JSON.stringify(defaultForm7)),
            btnLoading7:false,
            rules7: {
              aboutSaleNum: [{required: true, message: '请输入预计销售量', trigger: 'blur'},],
            },

            dialogVisible8:false,
            form8:JSON.parse(JSON.stringify(defaultForm8)),
            btnLoading8:false,
            rules8: {
              contactNum: [{required: true, message: '请输入今日联系客户数', trigger: 'blur'},],
            }
          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),
        isCanCustomerByAll(){
          if(this.roles.indexOf("customerByAll") != -1){
            return true
          }else{
            return false
          }
        },
      },
      created() {
        this.getDayList();
        this.getDayList1();
        this.getWeekList();
        this.getWeekList1();
        this.getList1();
        this.getList2();
        this.getUserOptionList();
        this.getUploadToken();


      },
      filters: {
        fifWorkType(val){
            if(val == 'normal_work'){
              return '正常'
            }else if(val == 'business_trip'){
              return '出差'
            }else if(val == 'leave_work'){
              return '请假'
            }
        },
        formatCreateTime(time) {
          if(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
          }else{
            return '--'
          }
        },
        fifType(val){
          if(val == 'senior_staff'){
            return '老员工'
          }else if(val == 'formal_staff'){
            return '正式员工'
          }else if(val == 'new_staff'){
            return '试用期员工'
          }
        },
        fiftransactionType(val){
          if(val == 'BANK_PAY'){
            return '银行汇款'
          }else if(val == 'COD_PAY'){
            return '货到付款'
          }else if(val == 'DEPOSIT_PAY'){
            return '定金'
          }else{
            return '其它'
          }
        },
      },
      methods:{
        //获取七牛TOKEN
        getUploadToken(){
          getQiniuToken().then((res)=>{
            this.uploadToken.token = res.token;
            this.imgDomain = res.domain
          })
        },
        //上传图片
        handleAvatarSuccess(res){
          console.log("res",res);
          this.form8.contactPics.push(this.imgDomain+res.key)

        },

        //删除图片
        delImg(index){
          this.form8.contactPics.splice(index,1)
        },
        //显示联系客户数
        showNum(item){
          this.dialogVisible8 = true;
          this.form8.dataId = item.dataId;
          this.form8.contactNum = item.contactNum;
          this.form8.remark = item.remark;
          this.form8.contactPics = JSON.parse(JSON.stringify(item.contactPics));
        },

        //关闭目标设置
        handleClose8(){
          this.dialogVisible8 = false;
          this.$refs.form8.clearValidate();
        },

        //提交目标设置
        handleConfirm8(){
          this.$refs.form8.validate((valid) => {
            if (valid) {
              this.btnLoading8 = true;
              editDayData(this.form8).then(response => {
                this.btnLoading8 = false;
                this.handleClose8();
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                });
                this.getDayList();
                this.getDayList1();
              }).catch(()=>{
                this.btnLoading8 = false;
              })
            }
          })
        },

        //显示目标设置
        showTarget(item){
          this.dialogVisible7 = true;
          this.form7.dataId = item.dataId;
          this.form7.aboutSaleNum = item.aboutSaleNum;

        },

        //关闭目标设置
        handleClose7(){
          this.dialogVisible7 = false;
          this.$refs.form7.clearValidate();
        },

        //提交目标设置
        handleConfirm7(){
          this.$refs.form7.validate((valid) => {
            if (valid) {
              this.btnLoading7 = true;
              editDayData(this.form7).then(response => {
                this.btnLoading7 = false;
                this.handleClose7();
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                });
                this.getDayList();
                this.getDayList1();
              }).catch(()=>{
                this.btnLoading7 = false;
              })
            }
          })
        },

        //显示修改周计划
        showEditWeek(item){
          console.log("item",item)
          this.dialogVisible6 = true;
          this.form6.dataId = item.dataId;
          this.form6.aboutSaleNum = item.aboutSaleNum;
          this.form6.topSaleNum = item.topSaleNum;
          this.form6.abCustomerNum = item.abCustomerNum;
          console.log("this.form6",this.form6)
        },

        //关闭修改周计划
        handleClose6(){
          this.dialogVisible6 = false;
          this.$refs.form6.clearValidate();
        },

        //提交修改周计划
        handleConfirm6(){
          this.$refs.form6.validate((valid) => {
            if (valid) {
              this.btnLoading6 = true;
              editWeekData(this.form6).then(response => {
                this.btnLoading6 = false;
                this.handleClose6();
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                });
                this.getWeekList();
                this.getWeekList1();
              }).catch(()=>{
                this.btnLoading6 = false;
              })
            }
          })
        },

        //显示修改日计划
        showEditDay(item){
          this.dialogVisible5 = true;
          this.form5.dataId = item.dataId;
          this.form5.aboutSaleNum = item.aboutSaleNum;
          this.form5.workType = item.workType;
          this.form5.aboutCustomerNum = item.aboutCustomerNum;

        },

        //关闭修改日计划
        handleClose5(){
          this.dialogVisible5 = false;
          this.$refs.form5.clearValidate();
        },

        //提交修改日计划
        handleConfirm5(){
          this.$refs.form5.validate((valid) => {
            if (valid) {
              this.btnLoading5 = true;
              editDayData(this.form5).then(response => {
                this.btnLoading5 = false;
                this.handleClose5();
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                });
                this.getDayList();
                this.getDayList1();
              }).catch(()=>{
                this.btnLoading5 = false;
              })
            }
          })
        },

        fullImg(src){
          this.dialogVisible4 = true;
          this.fullSrc = src;
        },
        //显示生成周计划
        showCreateWeek(){
          this.dialogVisible3 = true;
          this.form3 = JSON.parse(JSON.stringify(defaultForm3));
        },

        //关闭周计划
        handleClose3(){
          this.dialogVisible3 = false;
          this.$refs.form3.clearValidate();
        },

        //提交周计划
        handleConfirm3(){
          this.$refs.form3.validate((valid) => {
            if (valid) {
              this.btnLoading3 = true;
              createCheckData(this.form3).then(response => {
                this.btnLoading3 = false;
                this.handleClose3();
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                });
                this.getDayList();
                this.getDayList1();
                this.getWeekList();
                this.getWeekList1();
              }).catch(()=>{
                this.btnLoading3 = false;
              })
            }
          })
        },


        handleSearchList5(){
          this.listQuery5.pageNum = 1;
          this.getWeekList1();
        },

        handleSizeChange5(val){
          this.listQuery5.pageNum = 1;
          this.listQuery5.pageSize = val;
          this.getWeekList1();
        },
        handleCurrentChange5(val){
          this.listQuery5.pageNum = val;
          this.getWeekList1();
        },

        //获取周计划
        getWeekList1(){
          let listQuery = {};
          listQuery.tab = 'all';
          listQuery.userId = this.listQuery5.userId;
          listQuery.pageNum = this.listQuery5.pageNum;
          listQuery.pageSize = this.listQuery5.pageSize;
          this.listLoading5 = true;
          weekDataList(listQuery).then((res)=>{
            this.tableData5 = res.list;
            this.count5 = res.count;
            this.listLoading5 = false;
          }).catch(()=>{
            this.listLoading5 = false;
          })
        },

        handleSizeChange4(val){
          this.listQuery4.pageNum = 1;
          this.listQuery4.pageSize = val;
          this.getWeekList();
        },
        handleCurrentChange4(val){
          this.listQuery4.pageNum = val;
          this.getWeekList();
        },

        //获取周计划
        getWeekList(){
          let listQuery = {};
          listQuery.tab = 'my';
          listQuery.pageNum = this.listQuery4.pageNum;
          listQuery.pageSize = this.listQuery4.pageSize;
          this.listLoading4 = true;
          weekDataList(listQuery).then((res)=>{
            this.tableData4 = res.list;
            this.count4 = res.count;
            this.listLoading4 = false;
          }).catch(()=>{
            this.listLoading4 = false;
          })
        },


        handleSizeChange(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getDayList();
        },
        handleCurrentChange(val){
          this.listQuery.pageNum = val;
          this.getDayList();
        },
        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getDayList();
        },

        //获取日计划
        getDayList(){
          let listQuery = {};
            listQuery.checkDate = this.listQuery.checkDate;
            listQuery.tab = 'my';
            listQuery.pageNum = this.listQuery.pageNum;
            listQuery.pageSize = this.listQuery.pageSize;
          this.listLoading = true;
          dayDataList(listQuery).then((res)=>{
              this.tableData = res.list;
              this.count = res.count;
              this.listLoading = false;
          }).catch(()=>{
              this.listLoading = false;
          })
        },

        handleSizeChange3(val){
          this.listQuery3.pageNum = 1;
          this.listQuery3.pageSize = val;
          this.getDayList1();
        },
        handleCurrentChange3(val){
          this.listQuery3.pageNum = val;
          this.getDayList1();
        },

        handleSearchList3(){
          this.listQuery3.pageNum = 1;
          this.getDayList1();
        },

        //获取全部日计划
        getDayList1(){
          let listQuery = {};
          listQuery.checkDate = this.listQuery3.checkDate;
          listQuery.userId = this.listQuery3.userId;
          listQuery.pageNum = this.listQuery3.pageNum;
          listQuery.pageSize = this.listQuery3.pageSize;
          listQuery.tab = 'all';
          this.listLoading3 = true;
          dayDataList(listQuery).then((res)=>{
            this.tableData3 = res.list;
            this.count3 = res.count;
            this.listLoading3 = false;
          }).catch(()=>{
            this.listLoading3 = false;
          })
        },


          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
                  this.userOptionList = res;
              })
          },

          //选择员工名称
          handleSelectUserName(key,item){
              this.listQuery[key] = item.userId;
          },


        /**
         * 切换选择状态
         */
        handleSelect(key, keyPath){
             this.tab = key
            console.log(this.tab)
        },

        handleSizeChange2(val){
          this.listQuery2.pageNum = 1;
          this.listQuery2.pageSize = val;
          this.getList2();
        },
        handleCurrentChange2(val){
          this.listQuery2.pageNum = val;
          this.getList2();
        },


        //获取周计划规则列表
        getList2() {
          this.listLoading2 = true;
          weekRuleList(this.listQuery2).then(response => {
            this.list2 = response.list;
            this.count2 = response.count;
            this.listLoading2 = false;
          }).catch(()=>{
            this.listLoading2 = false;
          });
        },

        showSetWeek(type,item){
          this.dialogVisible2 = true;
          if(type == 'add'){
            this.form2 = JSON.parse(JSON.stringify(defaultForm2));
          }else{
            this.form2 = JSON.parse(JSON.stringify(item));
          }
        },

        //关闭周计划
        handleClose2(){
          this.dialogVisible2 = false;
          this.$refs.form2.clearValidate();
        },

        //提交周计划
        handleConfirm2(){
          this.$refs.form2.validate((valid) => {
            if (valid) {
              this.btnLoading2 = true;
              editWeekRule(this.form2).then(response => {
                this.btnLoading2 = false;
                this.handleClose2();
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                });
                this.getList2();
              }).catch(()=>{
                this.btnLoading2 = false;
              })
            }
          })
        },




        handleSizeChange1(val){
          this.listQuery1.pageNum = 1;
          this.listQuery1.pageSize = val;
          this.getList1();
        },
        handleCurrentChange1(val){
          this.listQuery1.pageNum = val;
          this.getList1();
        },


        //获取日计划规则列表
        getList1() {
          this.listLoading1 = true;
          dayRuleListApi(this.listQuery1).then(response => {
            this.list1 = response.list;
            this.count1 = response.count;
            this.listLoading1 = false;
          }).catch(()=>{
            this.listLoading1 = false;
          });
        },

        showSetDay(type,item){
            this.dialogVisible1 = true;
            if(type == 'add'){
              this.form1 = JSON.parse(JSON.stringify(defaultForm1));
            }else{
              this.form1 = JSON.parse(JSON.stringify(item));
            }
        },

        //关闭日计划
        handleClose1(){
          this.dialogVisible1 = false;
          this.$refs.form1.clearValidate();
        },
        //提交日计划
        handleConfirm1(){
          this.$refs.form1.validate((valid) => {
            if (valid) {
                this.btnLoading1 = true;
              editDayRule(this.form1).then(response => {
                this.btnLoading1 = false;
                this.handleClose1();
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                });
                this.getList1();
              }).catch(()=>{
                this.btnLoading1 = false;
              })
            }
          })
        },


        //删除日计划
        delDay(item){
          this.$confirm('确定删除此条记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delDayRule({roleId:item.roleId}).then(()=>{
              this.getList1();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            });

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },



      },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
